<template>
    <div class="box">
        <div class="top">
            <table class="table" cellspacing="0">
                <thead>
                    <tr>
                        <th rowspan="2">
                            <div class="biaotou">
                                <div class="biaotoutxt1">数值</div>
                                <div class="biaotoutxt2">项目</div>
                            </div>
                        </th>
                        <th rowspan="2">总数</th>
                        <th colspan="2">开工</th>
                        <th colspan="2">5000万元以下</th>
                        <th colspan="2">5000万至1亿元</th>
                        <th colspan="2">一亿元以上</th>
                        <th colspan="2">一亿元至五亿元</th>
                        <th colspan="2">五亿元以上</th>
                        <th colspan="2">五亿元至十亿元</th>
                        <th colspan="2">十亿元以上</th>
                    </tr>
                    <tr>
                        <th>数值</th>
                        <th>占比</th>
                        <th>数值</th>
                        <th>占比</th>
                        <th>数值</th>
                        <th>占比</th>
                        <th>数值</th>
                        <th>占比</th>
                        <th>数值</th>
                        <th>占比</th>
                        <th>数值</th>
                        <th>占比</th>
                        <th>数值</th>
                        <th>占比</th>
                        <th>数值</th>
                        <th>占比</th>
                    </tr>
                </thead>
                <tbody style="height: 60%; width: 100%">
                    <tr>
                        <td style="color:#fff">新建项目</td>
                        <td>
                            {{tableData1.newProject.titleValue?.total}}
                        </td>
                        <template v-for="item of tableData1.newProject.titleValue?.table" :key="item.title">
                            <td>{{item.titleValue}}个</td>
                            <td>{{item.percentage}}%</td>
                        </template>
                    </tr>
                    <tr>
                        <td style="color:#fff">续建项目</td>
                        <td>
                            {{tableData1.continuedProject.titleValue?.total}}
                        </td>
                        <template v-for="item of tableData1.continuedProject.titleValue?.table" :key="item.title">
                            <td>{{item.titleValue}}个</td>
                            <td>{{item.percentage}}%</td>
                        </template>
                    </tr>
                    <tr>
                        <td style="color:#fff">总计</td>
                        <td>
                            {{tableData1.totalProject.titleValue?.total}}
                        </td>
                        <template v-for="item of tableData1.totalProject.titleValue?.table" :key="item.title">
                            <td>{{item.titleValue}}个</td>
                            <td>{{item.percentage}}%</td>
                        </template>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="content">
            <div class="text">
                <span>新 续 建</span>
                <select name="" id="" class="all_top_select" v-model="project">
                    <option value="">无</option>
                    <option :value="item.id" v-for="(item, index) in projectList" :key="index">
                        {{ item.name }}
                    </option>
                </select>
            </div>
            <div class="text">
                <span>开 工 情 况 </span>
                <select class="all_top_select" v-model="work">
                    <option value="">无</option>
                    <option :value="0">开工</option>
                    <option :value="1">没开工</option>
                </select>
            </div>
            <div class="text">
                <span>分 布 情 况</span>
                <select name="" id="" class="all_top_select" v-model="area">
                    <option value="">无</option>
                    <option :value="item.id" v-for="(item, index) in areaList" :key="index">
                        {{ item.name }}
                    </option>
                </select>
            </div>
            <div class="text">
                <span>投 资 情 况</span>
                <select name="" id="" class="all_top_select" v-model="invest">
                    <option value="">无</option>
                    <option :value="item.id" v-for="(item, index) in investList" :key="index">
                        {{ item.name }}
                    </option>
                </select>
            </div>
            <div class="text">
                <span>项 目 进 展</span>
                <select name="" id="" class="all_top_select" v-model="work">
                    <option value="">无</option>
                    <option :value="item.id" v-for="(item, index) in workList" :key="index">
                        {{ item.name }}
                    </option>
                </select>
            </div>
            <div class="text">
                <span>名 称 搜 索</span>
                <input type="text" v-model="projectName" />
                <button style="cursor: pointer" @click="GetProjectPage">搜索</button>
            </div>
        </div>
        <div class="bottom">
            <el-table :data="tableData" border width="100%" height="100%" :header-cell-style="{
              color: '#e1ecf6',
              'font-weight': '700',
              'text-align': 'center',
              'font-size': '12px',
              background: 'linear-gradient(#4ea9e5, #1d49af)',
              'border-right': '2px solid #6be8f7',
            }" header-cell-class-name="aaa" @row-click="(row, column, e) => rowclick(row, column, e, 'unitName')">
                <el-table-column prop="projectName" label="项目名称" width="180" />
                <el-table-column prop="typeName" label="投资主体" width="180" />
                <el-table-column prop="floorSpace" label="占地(平方米)" />
                <el-table-column prop="money" label="预产值(万元)" />
                <el-table-column prop="profitTax" label="预计利税(万元)" />
                <el-table-column prop="progressName" label="项目进展" />
                <el-table-column prop="isStart" label="是否开工">
                    <template #default="scope">
                        {{ scope.row.isStart == 0 ? "是" : "否" }}
                    </template>
                </el-table-column>
                <el-table-column prop="areaName" label="所在区域" />
                <el-table-column prop="secretary" label="项目秘书" />
            </el-table>
        </div>

        <qwe v-if="$store.state.sta == 1" :ItemData="ItemData"></qwe>
        <!-- {{ $store.state.tc==1 }} -->
        <el-config-provider :locale="locale">
            <el-pagination v-model:currentPage="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-config-provider>

    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import qwe from "@/components/qwe.vue";
import { GetData } from "@/api/index";
import { useStore } from "vuex";
// 引入中文包
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const lang = () => {// eslint-disable-line no-unused-vars(如果运行时报错，就加上前面这行注释)
    location.reload()
}
let locale = zhCn
const store = useStore();
var dislog = ref("");

const tableData = ref([]);

const ItemData = ref({});

const rowclick = (row, column, event) => {
    store.commit("tcupdataa", 1);
    ItemData.value = row;
};

const project = ref("");
const work = ref("");
const work1 = ref("");
const area = ref("");
const invest = ref("");

// 当前页数
const pageNum = ref(1);
// 当前条数
const pageSize = ref(5);
// 总条数
const total = ref(0);
const projectName = ref("");
const handleSizeChange = (val) => {
    pageSize.value = val;
    GetProjectPage();
    //   console.log(`${val} items per page`)
};
const handleCurrentChange = (val) => {
    pageNum.value = val;
    GetProjectPage();
    //   console.log(`current page: ${val}`)
};

onMounted(() => {
    GetProjectPage();
    GetclassList();
    getTableData();
});

// 获取项目数据
const GetProjectPage = async () => {
    let res = await GetData(
        `/getProjectPage?pageNum=${pageNum.value}&pageSize=${pageSize.value}&areaId=${area.value}&moneyTypeId=${invest.value}&typeId=${project.value}&progressId=${work1.value}&projectName=${projectName.value}&isStart=${work.value}`
    );
    console.log(res, 123123);
    total.value = res.total;
    tableData.value = res.records;
};

const projectList = ref([]);
const workList = ref([]);
const areaList = ref([]);
const investList = ref([]);

const GetclassList = async () => {
    for (let i = 1; i < 6; i++) {
        if (i == 1) {
            let res = await GetData("/getTypeList?type=XM");
            projectList.value = res;
        } else if (i == 2) {
            let res = await GetData("/getTypeList?type=JZ");
            workList.value = res;
        } else if (i == 3) {
            let res = await GetData("/getTypeList?type=QYT");
            areaList.value = res;
        } else if (i == 4) {
            let res = await GetData("/getTypeList?type=TZ");
            investList.value = res;
        } else if (i == 5) {
            let res = await GetData("/getTypeList?type=JZ");
            workList.value = res;
        }
    }
    console.log(projectList.value);
};

const tableData1 = reactive({
    newProject: {},
    continuedProject: {},
    totalProject: {},
});

const getTableData = async () => {
    let res = await GetData("/getProjectTable");
    console.log(res, 111111111);
    tableData1.newProject = res.newProject;
    tableData1.continuedProject = res.continuedProject;
    tableData1.totalProject = res.totalProject;
    console.log(tableData1.newProject.titleValue.total, 22222222);
};
</script>

<style lang="less"  scoped>
.aaa {
    background-image: linear-gradient(rgb(0, 153, 255), rgb(0, 110, 255));
}

::v-deep .el-table__inner-wrapper {
    padding: 2px;
}

.biaotou {
    line-height: 0.3vw;
    text-align: left;
}

.biaotoutxt1 {
    color: #fff;
    /* 文字颜色  */
    padding: 1px 0 0 140px;
    /* 文字位置  需要手调  */
}

.biaotoutxt2 {
    color: #fff;
    padding: 1vw 0 0 2.3vw;
}

.box {
    height: 96%;
    width: 100%;

    .top {
        height: 25%;
        width: 100%;
        background: url("@/assets/imgs/bb.png");
        filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;

        /*table样式*/
        .table {
            width: 100%;
            height: 100%;
            font-size: 12px;
            text-align: center;
            color: #666;
            /*模拟对角线*/
        }

        .table thead {
            height: 38%;
        }

        .table>thead>tr {
            color: #fff;
        }

        .table tr:nth-child(1) th:nth-child(1) {
            width: 15.8%;
            background: linear-gradient(10deg,
                    transparent 49.5%,
                    rgb(255, 255, 255) 49.5%,
                    rgb(255, 255, 255) 50.5%,
                    transparent 50.5%);
        }

        .table tr:nth-child(1) th {
            width: 8.4%;
        }

        .table th {
            border: 1px solid #e8e8e8;
        }

        .table td {
            border: 1px solid #e8e8e8;
        }
    }

    .content {
        height: 10%;
        width: 100%;

        .text {
            height: 80%;
            width: 15%;
            margin-left: 0.8%;
            margin-top: 0.5%;
            // padding-top:20% ;

            display: inline-block;
            background: url("@/assets/imgs/donw.png");
            filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
            -moz-background-size: 100% 100%;
            background-size: 100% 100%;
            position: relative;

            span {
                position: absolute;
                left: 40%;
                text-indent: -13px;
            }

            .all_top_select {
                height: 40%;
                width: 100%;
                margin-top: 0.5%;
                border: none;
                position: absolute;
                top: 50%;
                // width: 12vw;
                /*取消默认箭头开始*/
                outline: none;
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                /*取消默认箭头结束*/
                padding: 0 0 0 1vh;
                color: #72aacd;
                background: url(../assets/imgs/xialajiantou.png) no-repeat right 0.5rem center;
            }
        }

        .text:nth-child(6) {
            height: 80%;
            width: 19%;
            margin-left: 0.7%;

            margin-top: 0.5%;
            display: inline-block;
            background: url("@/assets/imgs/donw.png");
            filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
            -moz-background-size: 100% 100%;
            background-size: 100% 100%;
            position: relative;

            span {
                position: absolute;
                left: 40%;
            }

            input {
                height: 40%;
                width: 70%;
                margin-top: 0.5%;
                margin-left: 0.8%;
                border: none;
                outline: none;
                position: absolute;
                top: 50%;
            }

            button {
                height: 40%;
                width: 27%;
                // margin-top: 0.5%;
                margin-left: 0.8%;
                border: none;
                background: url("@/assets/imgs/soushuo.png") no-repeat;
                color: rgba(253, 250, 250, 0);
                // -moz-background-size: 100% 100%;
                background-size: 100% 135%;
                position: absolute;
                top: 50%;
                right: 2%;
            }
        }
    }

    .bottom {
        height: 65%;
        width: 100%;
        // border: 2px solid #0f57c3a6;
        background: url("@/assets/imgs/bottomtable.png");
        filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
        // table {
        //     width: 100%;
        //     height: 100%;
        //     font-size: 12px;
        //     // text-align: left;
        //     // margin-left: 0.5%;
        //     border: 1px solid #e8e8e8;
        //     color: rgb(27, 25, 25);

        //     // thead {
        //     //     height: 8%;
        //     //     // background: url('@/assets/imgs/qqq.png');
        //     //     // filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
        //     //     // -moz-background-size: 100% 100%;
        //     //     // background-size: 100% 100%;
        //     // }

        //     // tr:nth-child(1) th:nth-child(1) {
        //     //     width: 21.2%;
        //     // }

        //     // tr:nth-child(1) th:nth-child(2) {
        //     //     width: 19%;
        //     // }

        //     // tr:nth-child(1) th:nth-child(3) {
        //     //     width: 9.7%;
        //     // }

        //     // tr:nth-child(1) th:nth-child(4) {
        //     //     width: 9.9%;
        //     // }

        //     // tr:nth-child(1) th:nth-child(5) {
        //     //     width: 9.5%;
        //     // }

        //     // tr:nth-child(1) th:nth-child(4) {
        //     //     width: 9.9%;
        //     // }

        //     // tr:nth-child(1) th:nth-child(5) {
        //     //     width: 9.5%;
        //     // }

        //     // tr:nth-child(1) th:nth-child(6) {
        //     //     width: 8.3%;
        //     // }

        //     // tr:nth-child(1) th:nth-child(7) {
        //     //     width: 5.5%;
        //     // }

        //     // tr:nth-child(1) th:nth-child(8) {
        //     //     width: 8.5%;
        //     // }

        //     // tr:nth-child(1) th:nth-child(9) {
        //     //     width: 8.4%;
        //     // }

        // }

        /deep/ .el-table {
            background: none;
        }
    }
}
</style>